<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<h2>flex-direction:row</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

	<style>
		.box{
			/*display:-webkit-flex;*/
			display:flex;
			margin:0;padding:10px;list-style:none; list-style-type:none; background-color:#eee;
		}
	
		.box li {
			width:100px;height:100px;border:1px solid #aaa;text-align:center;
		}
	
		#box{
			/*-webkit-flex-direction:row;*/
			flex-direction:row;
		}
		#box2{
			/*-webkit-flex-direction:row-reverse;*/
			flex-direction:row-reverse;
		}
		#box3{
			height:500px;
			/*-webkit-flex-direction:column;*/
			flex-direction:column;
		}
		#box4{
			height:500px;
			/*-webkit-flex-direction:column-reverse;*/
			flex-direction:column-reverse;
		}
	</style>

</body>
</html>
